<template>
  <div class="conversation-sidebar">
    <ConversationAddItem />
    <GroupAddItem />
    <el-container>
      <el-header>
        <div class="conversation-sidebar-header" @click="conversationListClick">
          <div title="会话列表" id="conversation-list">
            <i class="el-icon-chat-dot-round" :style=" active === 'conversation-list' ? 'color:white' : 'color:#a5b5c1'"></i>
          </div>
          <div title="群组列表" id="group-list">
            <i class="el-icon-notebook-1" :style=" active === 'group-list' ? 'color:white' : 'color:#a5b5c1'"></i>
          </div>
          <div title="好友列表" id="friend-list">
            <i class="el-icon-s-custom" :style=" active === 'friend-list' ? 'color:white' : 'color:#a5b5c1'"></i>
          </div>
        </div>
      </el-header>
      <el-main>
        <div class="conversation-sidebar-bottom">
          <ConversationList v-show="showConversation" />
          <FriendList v-show="showFriendList" />
          <GroupList v-show="showGroupList" />
        </div>
      </el-main>
      <div class="add-item">
        <el-button :title="showTitle" @click="addItemClick" type="primary" icon="el-icon-plus" circle />
      </div>
    </el-container>
  </div>
</template>

<script>
import ConversationList from './ConversationList.vue';
import FriendList from '../friend/FriendList.vue';
import GroupList from '../group/GroupList.vue';
import ConversationAddItem from './ConversationAddItem.vue';
import GroupAddItem from '../group/GroupAddItem.vue';

const activeName = {
  CONVERSATION_LIST: 'conversation-list',
  FRIEND_LIST: 'friend-list',
  GROUP_LIST: 'group-list'
};
export default {
  name: "conversation-sidebar",
  data () {
    return {
      active: activeName.CONVERSATION_LIST
    }
  },
  components:{
    ConversationList,
    FriendList,
    GroupList,
    ConversationAddItem,
    GroupAddItem
  },
  computed:{
    showConversation(){
      return this.active === 'conversation-list';
    },
    showFriendList(){
      return this.active === 'friend-list';
    },
    showGroupList(){
      return this.active === 'group-list';
    },
    showTitle(){
      let title = '';
      switch(this.active){
        case activeName.CONVERSATION_LIST:
          title = '添加会话';
          break;
        case activeName.FRIEND_LIST:
          title =  '添加好友';
          break;
        case activeName.GROUP_LIST:
          title =  '添加群组';
          break;
      }
      return title;
    }
  },
  methods: {
    conversationListClick(event) {
      switch(event.target.id){
        case activeName.CONVERSATION_LIST:
          this.active = activeName.CONVERSATION_LIST;
          break;
        case activeName.FRIEND_LIST:
          this.active = activeName.FRIEND_LIST;
          break;
        case activeName.GROUP_LIST:
          this.active = activeName.GROUP_LIST;
          break;
      }
    },
    addItemClick(){
      switch(this.active){
        case activeName.CONVERSATION_LIST:
          this.$store.commit('toggleIsAddConversationItemVisible',true);
          break;
        case activeName.FRIEND_LIST:
          this.$store.commit('showMessage', { message: '暂不支持添加好友' , type: 'warn' });
          break;
        case activeName.GROUP_LIST:
          this.$store.commit('toggleIsAddGroupItemVisible',true);
          break;
      }
    }
  }
};
</script>

<style scoped>
.conversation-sidebar{
  width:100%;
  height: 100%;
  background-color: #363e47;
  position: relative;
}
.el-header,.el-main{
  padding: 0;
}
.el-container.is-vertical{
  height: 100%;
}
.conversation-sidebar-header{
  display: flex;
  height: 60px;
  background-color: #303841;
  text-align: center;
}
.conversation-sidebar-header div{
  height: 60px;
  width: 33%;
}
.conversation-sidebar-header div i{
  line-height: 60px;
  font-size: 25px;
  color:#a5b5c1;
  /* 禁止i标签点击，避免干扰列表点击事件 */
  pointer-events: none;
}
.conversation-sidebar-bottom{
  width:100%;
}
.add-item{
  position: absolute;
  bottom: 1%;
  right: 3%;
}
</style>